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الإدارة العامة لتنمية مادة 
الكمبيوتر وتكنولوجيا المعلومات 


تكتولوجيا المعلومات والاتصالات 
مشروع 
(تصميم مواقع الوبب) 


كتاب الأنشطة والتدريبات 


الصف الثاني الثانوي 
الفصل الدراسي الأول 
1۸/۰1۷ 


E 


جمهوريه مص المريية 


تكنولوجيا المعلومات والاتصالات 
مشروع 
(تصميم مواقع الويب) 
كتاب الأنشطة والتدريبات 
الصف الثاني الثانوي 


الفصل الدراسي الأول 
إعداد 

د/ طاهر عبد الحميد العدلي أ/ أحمد عبد الله أحمد منصور 

خبير مناهج الكمبيوتر وتكنولوجيا المعلومات خبير الكمبيوتر وتكنولوجيا المعلومات 
مركز تطوير المناهج والمواد التعليمية إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 

أ/ محمد يوسف الصادق يوسف أ/ أحمد الأنصاري السلاموني 

خبير الكمبيوتر وتكنولوجيا المعلومات خبير الكمبيوتر وتكنولوجيا المعلومات 
إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات إدارة تنمية مادة الكمبيوتر وتكنولوجيا المعلومات 

مراجعة تربوية 


د/ روجينا محمد حجازي 
خبير المناهج مركز تطوير المناهج والمواد التعليمية 
مراجعة علمية 
أ/ ماشاء الله محمد محمد 
مدير عام إدارة مادة الكمبيوتر وتكنولوجيا المعلومات 
أستاذ الحاسبات والمعلومات بجامعة عين شمس 


إن 


لصميم 
خبير الكمبيوتر وتكنولوجيا المعلومات 
إدارة مادة الكمبيوتر وتكنولوجيا المعلومات 


الوحدة الأولى 


مقدمة الكتاب 

يفرض التطور المستمر والسريع في مجال تكنولوجيا المعلومات والاتصالات» على العملية التعليمية 
متطلبات وأساليب متطورة لمواكبة تلك التطورات التكنولوجية المتلاحقة. 

وهو ما دفعنا إلى تبنى مداخل تعليمية جديدة تهدف إلى تحقيق الأهداف والفلسفة والرؤى التي 
تضمنتها وثيقة مادة الكمبيوتر وتكنولوجيا المعلومات تعكس معايير ومؤشرات المادة للصف الثاني 
الشانوي التي تم اعدادها في إطار مصفوفة من المدى والتتابع على المراحل والصفوف الدراسية 
المختلفة. 

ويهدف المنهج إلى تنمية مهارات التعلم الذاتي والإلكتروني والتعاوني ومهارات التفكير بأنواعه 
المختلفة من خلال تعاون الطلاب في تنفيذ مشروعات لتصميم وإنشاء موقع ويب تفاعلي (قاموس 
مصطلحات مصور). 

تعتمد فكرة المشروع على انشاء نموذج يحتذى به لبرنامج تصمم صفحاته باستخدام تطبيق 
Web)‏ 655100:م<اع). ولغة الترميز 11لا11!. ويضم قواعد بيانات يتم إنشائها باستخدام برنامج 
.MySQL‏ 

ويتم التعامل مع قواعد البيانات من خلال أكواد جاهزة تمت كتابتها بلغة برمجة )۶۳١۴۶(‏ مفتوحة 
المصدر 5010166 08807 يمكنك نسخها والاستعانة بها في إنشاء صفحات الموقع وفهم وتطوير أي 
كود ترغب في تنفيذه. 

كما يتضمن الكتاب صورًا من واجهات التطبيق فعلية منفذة للمشروع» لتوضيح جميع خطوات 
العمل وتبسيط المفاهيم لدى المتعلمين» وذلك من خلال أنشطة وتدريبات عملية متضمنه في الكتاب 
المخصص لذلك. 

وأخيرًا فإن هذا الكتاب يحرص على تنمية مهارات التفكير المتنوعة والمهارات الحياتية والمهارات 
الخاصة باستخدام تكنولوجيا المعلومات والاتصالات لدى المتعلمين من خلال تنفيذهم مشاريع تتيح لهم 
فرصًا لتوظيف ما يقومون بدراسته في حياتهم العملية. 


(والله الموفق) 


فريق العمل 
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الوحدة الأولى 
أساسيات تصميم موقع الويب 


الوحدة الأولي :أساسيات تصميم مواقع الويب 
تدريب )١(‏ : مفاهيم أساسية 
نشاط :)١(‏ تثبيت برنامج "XAMPP installing" XAMPP‏ 
نشاط :)١(‏ "تشغيل برنامج MP۲‏ ۸×" 
الوحدة الثانية: متطلبات ومراحل إنتاج المشروع 
دروب (1): الي بخطط اقا موقم" 
تدريب )١(‏ :"تصميم مخطط لصفحات موقع قاموس المصطلحات المصور" 
تدريب (۳) : "المفاهيم الأساسية لقواعد البيانات 
تدريب :)٤(‏ "علاقة رأس برأس 0e‏ 70 ©0 " 
تدريب (5): "علاقة رأس برأس One 10 0e‏ " 
تدريب (5): "استنتاج علاقة رأس بأطراف /[1/137 10 0۸8 بين جدولين" 
تدريب (۷): "استنتاج علاقة أطراف بأطراف 1/1310 10 ۷ہج" بين جدولين 
نشاط :)١(‏ "إنشاء قاعدة بيانات باستخدام برنامج | 18/11/50 " 
نشاط (۲): "ادخال بيانات فى جدول 161175 باستخدام |09 5/إ!/! 


الوحدة الثالثة: إنشاء صفحات موقع 'قاموس مصطلحات الكمبيوتر المصور" 


نشاط :)١(‏ "إنشاء صفحة ويب باسم ٦٥51.۸٤۳‏ " باستخدام كود H۲۷1‏ 

نشاط (۲): "إنشاء صفحة ويب باسم ]76512.11 " باستخدام كود 111/11 

نشاط (۴): الربط بين صفحات الويب في كود لغة الترميز 1۲M‏ 

نشاط (5): "الربط بين صفحات الويب باستخدام برنامج "Expression Web‏ 

نشاط (5): "إنشاء موقع المشروع باستخدام تطبيق .Expressio0n¬ Web‏ " 

نشاط (5): "إنشاء صفحة ."Header.php‏ و 0 


نشاط (۷): "إنشاء صفحة ويب من نوع ۴H4۲‏ باستخدام برنامج "Expression Web‏ 
نشاط (۸): "إنشاء صفحة الاتصال بقواعد البيانات "Connection.php‏ 
نشاط (1): "إنشاء صفحة إدخال مصطلح "Add_term.php‏ 


الوحدة ة الأولى 


11_10 1 3 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


الوحدة الأولى 
أساسيات تصميم مواقع الويب 


في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 


اد يوضم بعض المقاهيم والمصطلحات العلمية المتقدمة ذات الضلة بالكمبيوثر. 
- يوظف برامج الكمبيوتر في تنفيذ مهام التعلم. 

۳- يوظف خدمات شبكة الإنترنت في عمليتي التعليم والتعلم. 

-٤‏ يمارس عمليات البحث عن المعلومات الإلكترونية بكافة صورها المتاحة 


على أجهزة الكمبيوتر وشبكات المعلومات الموثوقة في حل مشكلة. 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


العنوان : "مفاهيم أساسية" 0 0 
1 ( 
تعرضنا لبعض المفاهيم والمصطلحات الهامة اللازمة للتعامل مع قاعدة البيانات من خلال ِ! 


صفحة ويب ومعالجة بعض محتوياتها. 


المطلوب: اختر الإجابة المناسبة لإكمال العبارات التالية: 


)١(‏ برامج يسمح مالكها للجميع باستخدامها يطلق عليها: 
أ- .Free Ware‏ 
ب- .Open Source‏ 
ج- .Copy Write‏ 


(۲) برامج نُنشر ويُسمح للمستخدمين بالاطلاع على الكود الخاص بها وتعديله» يُطلق عليها: 
أ- .Free Ware‏ 
ب- .Open Source‏ 
ج- .Copy Write‏ 


(؟) صفحة ويب تعرض فقط بعض المعلومات ويظهر بها عنوان يتحرك من اليمين إلى اليسار 
ومؤثرات صوتية على برنامج مستعرض الإنترنت تعتبر: 

.Dynamic Web Page أ-‎ 

.Static Web Page ب-‎ 

.Home page ج-‎ 


أ .Static‏ 
ب- Dynamic‏ . 
ج- .Home Page‏ 
() كود ال +م1,ع5 المستخدم في معالجة بعض البيانات على صفحة الويب» وينفذ في: 
أ- جهاز الخادم المُخزن عليه الموقع فقط. 
ب- مستعرض الإنترنت فقط. 


ج-كل منهما. 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


)٦(‏ يكتب كود مء بلغات كثيرة» من أشهرها: 
أ .C#‏ 
ب- .HTML‏ 
ج- .PHP‏ 
(۷) صفحة الويب التى تتطلب منك إدخال اسم المستخدم وكلمة المرورء تعني أنها: 
أ- لا يتم إجراء معالجة لبياناتها . 
ب- صفحة .Static Web Page‏ 
ج-تتعامل مع .Database‏ 


(۸) مصطلح 5٥۲۷٥۲‏ يشير إلى جهاز الكمبيوتر: 
أ- ذو المواصفات الفنية الأعلى عن باقي أجهزة الشبكة. 
ب- الأكبر حجمًا في الشبكة. 
ج- المتصل بشبكة الإنترنت. 
(9) المصطلح 5٥۲۷٥۲‏ يمكن أن يشير إلى: 
أ- جهاز الكمبيوتر الأقل في المواصفات الفنية. 
ب- الدور الذي يقوم به جهاز الكمبيوتر في شبكة الكمبيوتر. 
ج- جهاز الكمبيوتر الموجود لدى المدير العام. 
)٠١(‏ جهاز كمبيوتر يُخزن عليه موقع ويب يطلق عليه: 
أ- .Database Server‏ 


.Mail Server ب-‎ 
.Web Server ج-‎ 


)١١(‏ جهاز كمبيوتر يُخزن عليه البريد الإلكتروني لشركة ماء يُطلق عليه: 


.Database Server أ-‎ 
„Mail Server ب-‎ 
.Web Server ج-‎ 


)1١١(‏ لغة الترميز 11/1 تستخدم في إنشاء: 
أ- .Dynamic Web Page‏ 


.Static Web Page ب-‎ 
.PHP Page ج-‎ 


(۱۳) صفحات ويب امتدادها م4إم. تشير إلى تنفيذ كود مام على: 


أ- مستعرض الإنترنت. 
ب- جهاز العميل +60 011 . 
ج- جهاز الخادم .Server‏ 
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الوحدة الأولى 


)١:(‏ مصطلح Publishing web Site‏ يعني: 


أ نشر موقع على الإنترنت. 
ا ا ا 


)٠°(‏ قامت إحدى الشركات بإنشاء موقع خاص بها لإدارة أعمالها ونشرته لجميع 


موظفيها فقط فإن هذا الموقع يعتبر: 
.Local Host -Î‏ 
ب- .Hosting Web Site‏ 
ج- .Host‏ 


)١١(‏ العنوان التالي لأحد المواقع الخاص بشركة ما 


اww.company.com/index.htmسhttp://W»‏ من قراءتك للعنوان 
السابق نلاحظ أن هذا الموقع تم نشره: 

.Local Host أ- محليًا‎ 

.Publishing web Site ب- على الإنترنت‎ 

dûd‏ محليًا وعلى الإنترنت. 


(1) يوجد العديد من البرامج المجانية الخاصة بنظم إدارة قواعد البيانات ذات 


العلاقات منها: 
أ- MySQL.‏ 
ب- 501. 
ج- .Access‏ 


)1١(‏ اللغة المستخدمة في التعامل مع البيانات من إضافة وحذف وتعديل هي: 


.SQL أ-‎ 
.HTML ب-‎ 
.Java ج-1م5011‎ 


(19) أحد طرائق نقل البيانات من صفحة ويب إلى أخرىء ويتيح فيها مطور الموقع 


للمستخدم زيارة بعض صفحات الموقع أو كلهاء يطلق عليها: 
.Password -Î‏ 
ب- User Name‏ . 
ج- Session‏ . 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 6 ۸ 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


تحت اشراف معلمك اتبع الخطوات الآتية لتثبيت البرنامج: 
٠‏ استخدم الكلمات المفتاحية الخاصة بتثبيت البرنامج فى البحث عبر محركات البحث 
بالإنترنت. 
٠‏ ناقش معلمك وزملائك فيما تم التوصل إليه. 
ه اضغط ان1|ن)-(| على الملف xampp-win32-5.6.3-0-VC11-installer.exe‏ 


بعد ظهور الشاشة التالية: 


BitNami 


ه تابع خطوات تثبيت البرنامج من خلال شاشات المعالج التالية: 


Setup - XAMPP 


ه عرض "شاشة ترحيب", 
ثم اضغط على زر ")×۵ ۸". 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


ه الثشاشة التى أمامك لتحديد "مكونات 


البر نامج" التي تر غب گی اخڌيار ها( ناقش 8 Select Components‏ 


are reaû 


NT Click on a component to get a detailed description واستخداماتع أ ثم حدد المكونات ا‎ 


Apache 
MySQL » 
Filezilla FTP Server 1 تختار ها‎ 
Mercury Mail Server 
Tomcat 

ogram Languages 
PHP 4 . 
Perl لصبحه‎ © 


ogram Languages 


قم باختيارها جميعًا وخاصة TT Apache‏ 
و .MySQL‏ 


>|إكال>ا|»ا||»] + 


8 


GIG 


كال>||!»> 


Fake Sendmail 


XAMPP Installe 


« اضغط زر "†×ع۸". 


Installation folder 
Please, choose فد‎ 5 all XAMPP ٠. عو‎ N 3 
“سكسس‎ DY لمجلد اختر المجلد الذى‎ ١ من شاشة تحديد‎ © 


1 تيب 5 البرنامج فيه» ثم ۱ 5 ٠.‏ / زر 
."Next"‏ 


XAMPP Installer 


Cancel 


ه ادرس الشاشة التي ظهرت أمامك.. ناقش 
محتواها مع زملائك ومعلمك وإلى ماذا 
تشير؟ 

ه الشاشة تؤكد أن البرنامج مجاني ويدعم 
بعض البرامج مفتوحة المصدر مع إمكانية 
تعلم المزيد عن برنامج M۲۲‏ ۸×. 

ه اضغط زر "†×ع۸". 


Bitnami for XAMPP 


Bitnami For XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
عءاييج‎ apps on top of your existing XAMPP installation. 


https: ffbitn: 
س يي-‎ 


Learn more about Bitnami for XAMPP [¥‏ &$ جنم 


e‏ ر 


XAMPP Installer 
Cancel 
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الوحدة الأولى 


أساسيات تصميم موقع الويب 


ه عند ظهور شاثئة بدء عملية تثبيت برنامج xAMPP»ء‏ 


انتظر حتى نهاية التثبيت» ثم اضغط زر "4ره/1". 


Welcome to XAMPP! 


XAMPP is an easy to install Apache distribution 
containing MySQL, PHP and Perl. 


Installing 
Unpacking files 


AMPP Installer 


شار ار نل اه اا الا رتا 
.XAMPP‏ 
ه اضغط زر "اواماع". 


ه مع ظهور شاشة لوحة التحكم لبرنامج 
تأكد من اختيار ©8365 واضغط 
على زر ٣"‏ ھSt"‏ اسفل "05 ہاAct".‏ 


« كرر الخطوة السابقة مع 1/!/50. 


ım © ê Km 0١ 


BitNami for XAMPP 


BitNami for XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
source apps on top of your existing XAMPP installation. 


سا د ” ا ا سب 


Come 


O Netstat 
Î Shell 
la Explorer 
17 Senices 
O Help 


O Quit 


^ 


4*9 
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installing 


1 Unpacking files 


#AMPP Installer 


Completing the XAMPP Setup ¥Yizard 


Setup has finished installing XAMPP on your computer. 


| Do ¥ou want to start the Control Panel now? 


Config 
Config 
Admin Config 
Admin Config 


Admin Config 


١ [Apache] XAMPP Apache Service is already running on port 80 
1 [Apache] XAMPP Apache Service is already running on port 443 
1 [mysql] XAMPP MySQL Service is already running on port 3306 


PID(s) Ports) Actions 
1532 80, 443 Stop 
680 3306 Stop 
Sta 

Start 


Start 


XAMPP Installation Directory: "c:i\xampp\" 


Checking for prerequisites 
All prerequisites found 
Initializing Modules 


Starting Check-Timer 
Control Panel Ready 


1 Module 
Apache 
MySQL 
FileZilla 
Mercury 


Tomcat 


M [main] 
main] 
1 [main] 
1 [main] 


main] 
/ [main] 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


كيف تتأكد من صحة تثبيت برنامج 2 
XAMPP‏ ؟ م 5 


ناقش معلمك وزملائك للتأكد من صحة تثبيت برنامج م781/628: 


ه اكتب في شريط العنوان 10315054 واضغط مفتاح الإدخال "معغمع". 
ه فتظهر الشاشة التالية: 
لكك 


© : !]5[ http://localhost/xampp/ 
ل س‎ 
XA M م م‎ for Wi n d OWS English / Deutsch / Francais / Nederlands / Polski / Italiano / 


Norwegian / Espafiol / #X / Português (Brasil) , Ek} 


Try out the new XAMPP welcome page مم‎ 


We are working on a new Welcome page for XAMPP and we need your help! You can you can see the current 
welcome) version at Dashboard. We are improving our current "FAQs" and adding new "How to" guides. We posted some 
Welcome suggestions for new guides at ApacheFriends forum. If you have any comments or suggestions for the new welcome 
Status page, please don't hesitate to post in the forum. Your feedback will help us improve XAMPP!. If you have any 
Security comments or suggestions for the new welcome page, please don't hesitate to post in the forum. Your feedback will 
Documentation help us improve XAMPP! 
Components 
Applications 


i | Welcome to XAMPP for Windows! 


0 Congratulations: 
ole esle You have successfully installed XAMPP on this system! 
LD ULL 


Instant Art Now you can start using Apache and Co. You should first try @Status® on the left navigation to make sure 
Phone Book everything works fine. 


perl For OpenSSL support please use the test certificate with https://127.0.0.1 or https://localhost 
perlinfo() Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 


Guest Book 
ا‎ Install applications on XAMPP using Bitnami 
` Info Apache Friends and Bitnami are cooperating to make dozens of open source applications available on XAMPP, for 
Tomcat examples free. Bitnami-packaged applications include Wordpress, Drupal, Joomla! and dozens of others and can be deployed 


with one-click installers. Visit the Bitnami XAMPP page for details on the currently available apps. 
Tools 


phpMyAdmin ۵ 
لق نا‎ 
EEA ھک‎ 
ElÎ 


XAMPP Hosting 
©2002-Zu.- 
„APACHE 


FRIENDS. XAMPP provides an ideal local development environment, but is not meant for production deployments. We want to 
7 make hosting PHP applications created with XAMPP as easy as possible. Visit our Hosting page for reading our ب‎ 
documentation. 


بعد تثبيت 21/6565 وتحميله أصبح جهازك الشخصي بمثابة جهاز خادم "اوه اهءها". 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ٠‏ ۱۲ 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


"XAMPP running" XAMPP العنوان : تشغيل برنامج‎ 


3 
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يساعدك هذا النشاط فى تشغيل برنامج 281/1298 الذي يجعل جهازك يقوم بدور الخادم 
© » وتشغيل برنامج ©8361 وبرنامج نظم إدارة قواعد البيانات 501 لاالاا. 


ب 


١ 
ا‎ 
ا‎ 
ا‎ 
ا‎ 
١ 


شغل ١0ا8‏ لوحة التحكم الخاصة برنامج 481/58ا؛ وتأكد من تشغيل برنامجي 


.MySQL رو‎ Apache 
تنفيذ النشاط:‎ 


ه شغل لوحة التحكم الخاصة ببرنامج 81/56 بأحد الطرائق التالية: 


.١‏ قائمة 51316 كما بالشكل التالى: 


| أي لوحة التحكم‎ X AMP Contr Pane اختر‎ « 


XAMPP لبرنامج‎ 


WinRAR‏ ذال 
JÛ xampp‏ 
E Bîitnami for XAMPP‏ 
Uninstall XAMPP‏ ™ 
E] xAMPP Control Panel‏ 
ıJ XAMPP htdocs folder‏ 
JÛ xvîia‏ 
ıJ Yahoo! Messenger‏ 
ıJ YTD Video Downloader‏ 
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Back 


مر 


CS | يج‎ | o 


٠‏ من نافذة لوحة التحكم الخاصة ببرنامج 26/155 نفذ ما هو مشار اليه: 


ا 


1 


[leas] Emere) 
Logs W: Services 
ار‎ 


انقر +5831 لتشغيل 
Apache‏ وكذا زر 

MySQL بجوار‎ Start 

فيظهر على الزر مهك 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


80, 443 ] Stop | ] Aamin | ] Config | [_ Logs |j 


Config 


om 
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XAMPP Control Panel v3.2.1 


Modules 

Service Module PID(s) Port(s) Actions 
Apache 1812 
MySQL 3456 3306 Admin 
FileZilla Ad 
Mercury Admin 
Tomcat Admin 

07:50:44 ص‎ ]main] XAMPP Installation Directory: "c:\xampp\" 

7:50:44 ص‎ ]main[ Checking for prerequisites 


All prerequisites found 
Initializing Modules 


XAMPP Apache Service is already running on port 80 
[Apache] XAMPP Apache Service is already running on port 443 
[mysql] XAMPP MySQL Service is already running on port 3306 


Starting Check-Timer 


2 ص‎ ]main[ Control Panel Ready 


۳ 4 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


؟. كما يمكن تشغيل XAMPP‏ من ملف XAMPP-control.exe‏ في مجلد «C:\XAMPP‏ 
مع مراعاة التأكد من مسار تثبيت البرنامج على جهازك. 


Apache port تغيير منفذ‎ 


في بعض الأحيان تحدث مشكلة عند النقر على 513/4 امام 83616 لتشغيله 


وتظهر نافذة كالتالي: 


5399 يكرح 

(O Netstat | 

[Config J Logs 
Config Logs W: Services 
Config) *سه م | (-5ومك]‎ 


Admin 


Admin 


Admin 


Admin 


Admin 


about running this application with administrator rights! 


oR 0 in use by اا ا‎ to ا ات ت‎ 2 4! 


1 5 | 
You اا‎ to as ê ا‎ apical 
م‎ [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
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8 XAMPP Control Panel v3.2.1 

Modules 

Service Module PID(s) Port{s) Actions 
Apache Start 
MySQL Start 
FileZilla Start 
Mercury Start 
Tomcat Start 


XAMPP Installation Directory: "c:\xampp\"‏ [00310] ص 
Checking for prerequisites‏ [ainہ]‏ ص 

i All prerequisites found 

naiakizing Modules 


[Apache]‏ م 


Starting Check-Timer‏ [ainص]‏ ص 
Control Panel Ready‏ [ainصm]‏ ص ١1‏ 


السطر المشار E‏ 2 ا ا 
تطبيق آخر ويحدث هذا في حالة تثبيت 


ويمكن حل هذه المشكلة باختيار منفذ آخر لبرنامج 303616 باتباع التالي: 


« افتح ملف 04ع.0م+غ+ط في محرر النصوص 30م8/086 والموجود بالمسار: 


كما بالشكل التالي: 


Cl\:xampp\apache\conf 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 4 1 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


کک كاك 
م “OLE C:\xampp\apache\conf -| 4% 1 Search conf‏ 
File Edit View Tools Help‏ 
Open > Burn New folder 5 > 952 ©‏ ا > Organize‏ 
Name Date modified Type‏ 2 
: 1 6 تازه 
File folder‏ ونه 3 omputer‏ 0 
Abdallah_Mansour (C:) ۳ original File folder‏ & 4 
Jl SAVG‏ 
JÛ sslet File folder‏ ط 
gl 75390073a585fdc4e4d822f9f882 9 7100‏ > 
ssl.csr ile folder‏ 
AdwCl‏ 
Û sslkey File folder‏ 5 تومه 
charset.conv CONV File‏ |_| ف D‏ 7 
e __ Îz httpd.conf CONF File‏ 
magic File‏ 60 له 
- اعم 
mime.types TYPES File‏ نا ١ - 32 2 Fil‏ 
openssl.cnf YTelE/°N11 p eT:  CNF File‏ |_| 00 
ProgramData‏ 3 
SWsetup‏ ل 
lJ swrooıs‏ 
Users‏ نه 
Windows‏ 7" 
xampp‏ لل > 
Local Disk (D:)‏ وت 
Removable Disk )6:(‏ & 
Network‏ ب 
٠١‏ 71 سه 1 ها e‏ 
:£« ص Date created: 7١١6/٠5/١١‏ 7 ص الء رلاء بها١؟ httpd.conf Date modified:‏ 
cone Fie Size: 20.8 8‏ | ألا 


ه يمكنك أيضا فتح ملف #موع.لومغ:ط بالنقر على ع#مهم© من نافذة 
Panel XAMPP‏ اContro‏ كما بالشكل التالى: 
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8 XAMPP Control Panel v3.2.1 
Mod 
Servis Module PID(s) Port(s) Actions 


Apache Admin [Canfa 1 1 5م‎ Shell 
Apache (httpd.conf) 
MySQL ۸ 1 
7 عا لدف‎ Apache (httpd-ssl.conf) 
Filezilla Admin عه‎ Apache (httpd-xampp.conf) 
PHP (php.ini 
phpMyAdmin (config.inc.php) 
Tomcat Admin 0 
(star | عا‎ <Browse> [Apache] 
about running this application with administrator rights! <Browse> [PHP] 
1 XAMPP Installation Directory: "c:\xampp\" <Browse> [phpMyAdmin] 
Checking for prerequisites 


All prerequisites found 

Initializing Modules‏ ل 

9:31 ص‎ ]Apache] Problem detected! 

31 ص‎ [Apache] Port 80 in use by "Unable to open process" with PID 4! 

31 ص‎ [Apache] Apache WILL NOT start without the configured ports free! 

31 ص‎ [Apache] You need to uninstall/disable/reconfigure the blocking application 

31 ص‎ [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
ص‎ ]mصain[‎ Starting Check-Timer 

59:31 ص‎ ]main[ Control Panel Ready 


شه 


N‏ يم نم نم نم نم نم يم يم يم يم د 


يم 
1 


٠‏ بعد فتح الملف تظهر نافذة 20مع+4-50ممع.0م+7 كما بالشكل التالي: 
لاحظ السطران المشار إليهما على الشكل التالي يحددان رقم المنفذ ۲مم وهو 
066 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ١ ْ ٠‏ 


File Edit Format View Help 


Listen: Allows you to bind Apache to specific IP addre 
ports, instead of the default. see also the <VirtualHc 
directive. 


change this to Listen on specific IP addresses as shov 
prevent Apache from glomming onto all bound IP address 


E Hk n‏ مد E‏ مد مد مد يد 


ه قم بتغيير الرقم إلى81 ٠‏ واحفظ الملف. 
٠‏ بعد اعادة تشغيل Apache‏ . 


ناقش زملائك ومعلمك . 


# 

# Dynamic shared Object (DSO) support 

# 

# To be able to use the functionality of a module which 
# have to place corresponding Loadmodule' 1ines at this 
# directives contained in 1t are actually available _bef 
# Statically compiled modules (those 1isted by httpd -1 
# to be loaded here. 

# 


I 


> 


ه تأكد من أنه تم تشغيل ع عدم بالمنفذ الجديد 81 ۲٥م‏ كما بالشكل التالى: 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 
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8 XAMPP Control Panel v3.2.1 ل‎ Cong 
Modules 
Netstat 
Service Module PID(s) Port({s) Actions © Nets 
Apache 7 01, 443 | Admin | Config Logs 89 Shell 
Admin Config Logs ها‎ Explorer 
Admin Config Logs ¥: Services 
Admin Config Logs © Help 
Admin Config Logs Il Quit 
31 ص‎ [Apache] You need to uninstall/disable/reconfigure the blocking application ج‎ 
1 ص‎ [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
1 ص‎ ]صain[‎ Starting Check-Timer 
1 ص‎ ]صain[‎ Control Panel Ready 
01:10:02 ص‎ [Apache] Problem detected! 
01:10:02 ص‎ [Apache] Port 80 in use by "Unable to open process" with PID 4! 
01:10:02 ص‎ [Apache] Apache WILL NOT start without the configured ports free! 
01:10:02 ص‎ [Apache] You need to uninstall/disable/reconfigure the blocking appli 
01:10:02 ص‎ [Apache] or reconfigure Apache and the Control Panel to listen g 5 
01:10:02 ص‎ [Apache] Attempting to start Apache app... في‎ Apache 
01:10:02 ص‎ [Apache] Status change detected: running حالة تشغيز‎ 


الوحدة الأولى 
أساسيات تصميم موقع 2 


a httpd.conf - Notepad 


الوحدة الأولى 


أساسيات تصميم موقع الويب 


يجب تحديد المنفذ الجديد 81 غ501 عند تشغيل برنامج 81/158ا من خلال مستعرض الانترنت 
http://localhost:81/XAMPP/‏ 
كما بالشكل التالي: 


(f El http://localhostE1/xampp/ م‎ - 6 || EJ xawPP 5.63 


://localhost:81/xampp/ 


22000 


©2002-5 
5 
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۱۷ ۳ ae DRE الاتاسالات‎ BE A 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


الوحدة الثانية 


متطلبات ومراحل إنتاج المشروع 


في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 


-١ 


-6 


يقترح مشروعات بسيطة لتوظيف تطبيقات وخدمات تكنولوجيا المعلومات والاتصالات 
في المجالات الحياتية والدراسية 

يوظف تطبيقات تكنولوجيا المعلومات والاتصالات في تبادل مهام المشروعات 

يوظف بعض البرامج والتطبيقات المكتبية(جداول حسابية - قواعد البيانات) فى إنتاج مهام 
محددة ضمن مشروعات تعليمية. 

يرظفا عدة برام لجل الشكلاة. التطزمرة واتصيفرة: 

بص قاغدة برلاات مداسية لمشبروعه 

يمارس مهارات البرمجة بلغة م[]إدا. 

يستخدم بعض تطبيقات الانترنت فى تنفيذ مشروعه. 

يصع سفحات ورب كقاطزة خاضنة ومشروعة. 

و بط صقحات الويف التقاطلية قداص انات 


-٠١‏ ينتج مشروع باستخدام تطبيقات الانترنت المتقدمة. 
١١‏ يوظف قواعد البيانات المتقدمة ( 1197/5©01) فى تصميم مواقع لحل مشكلة حياتية. 
-۲١‏ يستخدم لغة البرمجة ۴1۲ فى انتاج برمجيات وموقع ويب للتعبير عن افكاره. 


21 


يقيّم مواقع ومصادر المعلومات من حيث الدقة والمصداقية في ضوء معايير محددة. 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 2 ۱۸ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


| العنوان : "تصميم مخطط لصفحات موقع". للل لل 


٠‏ حت اسراف مظمق و شرن عم مجو عة ف رقف ماضن لك تل من براح عاج 
ا الرسومات والصور فى رسم مخطط لصفحات موقع. 


مقترح مثل: | 
> موقع عن السياحة فى مصر. ظ 
> موقع عن تاريخ مصر. 
> موقع عن الاستخدام الآمن للإنترنت. 
» ..... الخ. 

اعرض المخطط على زملائك باستخدام برامج العروض التقديمية والوسائط المتعددة: ٍْ 
حدد صفحات الموقع والغرض من كل صفحة. | 
> حدد الصفحات التى تظهر مع كل صفحات الموقع. 


4 


ناقش | 
المخطط المقترح مع معلمك 
ومع باقى المجموعات 


| تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي EU: E‏ 4 5 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


: "تصميم مخطط لصفحات موقع قاموس التضطلات ' المصور". 


كح لسرن ا ا 
الرسومات والصور فى رسم مخطط لصفحات المشروع. 


اعرض المخطط على زملائك باستخدام برامج العروض التقديمية والوسائط المتعددة: 


حدد صفحات الموقع والغرض من كل صفحة. 
> حدد الصفحات التي تظهر مع كل صفحات الموقع. 


. تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ‏ د : 4 ۳٠‏ 


العنوان : "المفاهيم الأساسية لقواعد البيانات". 


` ادرس الجدول التالي لبيانات الطلاب: 


3 
١ 


١ 
ا‎ 
ا‎ 
ا‎ 
ا‎ 
ا‎ 
ا‎ 
1 
ا‎ 
ا‎ 
ا‎ 
1 


/ 
/ 


اسم الطالب 


نوع الطالب 
ذكر 


ناقش زملائك ومعلمك فيما يلى: 


السجلات 166©0105, والحقول 6105 1!: 


Records السجلات‎ 


خصائص كل حقلء من حيث: 


Field Name اسم الحقل‎ 


لاحظ هل يمكن أن يتكرر اسم طالب أو اسم المحافظة أو تاريخ الميلاد ...إلخ ؟ 


المحافظة 


F۴ield Type نوع الحقل‎ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


الل 
ل لق 
۱ ۲۹۰ 


۱۹۹۸/۷/٦ 


الحقول 16105] 


حجم الحقل 512 ۴|4 


اسم الطالب نوع الطالب المحافظة تاريخ الميلاد التليفون 
- أي الحقول بالجدول يصلح أن يكون حقل مفتاح أساسي Primary key‏ ا 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


۲١ 2 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


- كيف يمكن إضافة حقل جديد يقوم بدور مفتاح أساسي للجدول؟ 


سجل مقترحاتك 
وناقشها مع زملائك ومعلمك. 


9 تكنولوجيا المعلومات والاتصالات ال الثاني الثانو ي 1 5 4 | ۲ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


جدول 'بيانات الطالب جدول 'حالة الطالب" 
رة الاسم تاريخ الميلاد | الجنسية | العنوان | التليفون رقم الصف العام الحالة 
الطالب الطالب | الدراسي | الدراسي | الدراسية 
١‏ هاني 0/0١‏ أمصري القاهرة ١١١١١ ١‏ ۳ ۱/۲ 5 /منقول 
؟ |أمل ۲ [|مصرية |الجيزة ٤ oY‏ ۳/۲ 5 /منقول 
۴۳ |وليد ۳| أمصري قنا ۹۹۸۷۷ ١‏ بذاك 5 /منقول 
4 أسمر ٤‏ |مصرية |أسوان 8ه ۲ 1/۲ 5 | باقي 


بيب س 
ادرس المخطط . ثم اتبع الإجراءات التالية: 
- صف العلاقة التي تربط بين الجدولين: 


- حدد حقول الربط لكلى الجدولين؟ TT‏ 
- حقلي الربط متمائلين من حيث: .................... » e‏ 
- العلاقة بين الجدولين رأس برأس فسر العلاقة بأمثله من سجلات كلا الجدولين: 


ناقش 
زملائك ومعلمك فى تفسيرك. 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


العنوان: "علاقة رأس برأس 056 70 056 بين جدولين " 


حقل مفتاح أساسي PK‏ حقل مفتاح أساسي PK‏ 
جدول (مدرس) جدول (فصل) 


كود المدرس | اسم المدرس | العنوان رقم التليفون كود الفصل | الفصل | كود رائد الفصل 


ادرس المخطط › ثم اتبع الإجراءات التالية: 
٠‏ صف العلاقة بين الجدولين : 


ناقش زملانك ومعلمك فيما يلى: 
٠‏ يرتبط حقل من الجدول الأول بحقل من الجدول الثاني. حددهما: 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 6 ٤‏ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


جدول الصف جدول الطلاب 

رقم الصف | اسم الصف | مكان الصف العام الدراسي | الشعبة 
۱۰۱ الأول الدور الأول ليق علمي ١٠١١|‏ 
۲۰۱ الثاني الدور الثاني ۲٦‏ علمي ٣۰۱|‏ 
۳۰۱ الثالث الدور الثالث ۲۰۱٦ ١‏ أدبي ۱۰۱ 


۲ ۹ علمی |۲۰۱ 


۲۰١ أدبي‎ ۲۰٦ ° 
۳۰۱ علمي‎ ۲۰ ۷ 
۳۰۱ أدبي‎ ES ۹ 
۱۰۱ أدبي‎ ES ١ 
۱۰۱ أدبي‎ ES ۱۲ 

ادرس المخطط › ثم اتبع الإجراءات التالية 

ه صف العلاقة بين الجدولين. 

ناقش زملائك ومعلمك فيما يلي: 

۰ حدد اسم الجدول ©0126 ............... » واسم الجدول O N2۸3۷‏ 


٠‏ يرتبط حقل من الجدول الأول بحقل من الجدول الثاني حددهما. 


ه حدد أرقام الطلاب الموجودين في الصف رقم ٠١١‏ 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي . 4 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


العنوان : " استنتاج علاقة أطراف بأطراف رمج“ 01/131760 بين جدولين " 


جدول الصف جدول المعلمين 
اسم 
المعلم 
الأول الدور الأول أحمد | كمبيوتر 
الثاني الدور الثاني ٤‏ منى لغة إنجليزية 
الثالث الدور الثالث ١‏ أمل لغة عربية 


قلي ركم الصف 
ورقم المعلم معًا 
مفتاح أساسي في 
جدول الربط 


ادرس المخطط ثم اتبع الإجراءات التالية: 
ه صف العلاقة بين الجدولين: 


ناقش زملائك ومعلمك فيما يلى: 
« املء جدول الربط بنموذج لبعض السجلات. 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي “ 6 ۲٦‏ 
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الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


العنوان : "إنشاء قاعدة بيانات باستخدام برنامج /1!50/؟" 
“يساعدك هذا النشاط على إنشاء قاعدة بيانات بالخصائص التالية: 

اسم قاعدة البيانات: 06016110031 

محتواها: جدول بيانات باسم 161775, يضم عدد (5) خمسة حقول هي: 


(ID - Term — Terms - 5 Defe - Picture) 


الإنشاء قاعدة بيانات ا د نفذ تحث اشراف معلمك me‏ التالبة 


Module Port{s) Actions 
Apache .ممه ] 443 ,مع‎ 1) [Admin] [Config] [Logs [ 
MySQL 3306 ] وقممع.] [ متصفى ] | مم5‎ [ [Logs | [La Explorer | 
FileZilla Admin [ [zConfgus) (سدوملت]‎ [4® Senicesy) 
Mercury Start) Admin Config Logs نت‎ Help 

Tomcat Admin سدس‎ 


09:34:00 ص‎ f eer Enabling autostart for module "MySQL" 
U Starting Check-Timer 

Control Panel Ready 
Autostart active: starting... 
Attempting to start Apache app. 
Autostart active: starti 
Attempting to start MySQL app. 

04 ن‎ Status change detected: running 

04 [الودلام] ص‎ Status change detected: running 


)0( اكتب العنوان التالي: http://localhost/phpmyadmin/‏ في شريط عنوان مستعرض 
دسح المتاح على 6 


2 
1 
8 


وججج 
١ ١‏ 


اد 


(۳) اختر تبويب "036303565" أعلى الشاشة السابقةء ثم اختر لغة واجهة التطبيق التى تفضلها في 
جزء "Appearance Setting"‏ ثم اضغط "الاعالا" المشار إليها أعلى يسار الشاشة لتظهر لك 
الشاشة التالية: 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ROE‏ 6 ۷ 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


127.0.0.1 ع تسا - 


phpMyAdmin 
A 49616 

Recent Favorites 

لكك 


9 aa Databases 


| cdcol 


۳- أنقر زر عغ+هه7 
لإنشاء قاعدة البيانات 


J information_schema û Create database © 


mysql | Database name _‏ 1 الها 
FJ performance_schema‏ 

phpmyadmin‏ زر 
term‏ | 


test 
تا‎ ê Collation 
J webauth 0 
) latin1_swedish_ci وق‎ Check Privileges © O O 


latin1_genera1_ci a Check Privileges 


information_schema utfs_genera1l_ci ã7] Check Privileges 


-١‏ اسماء قواعد البيانات 
التي سبق إنشائها 


latin1_swedish_ci ده‎ Check Privileges 
utfs_genera1_ci كه‎ Check Privileges 


utfs_bin ده‎ Check Privileges 


| وفيها يظهر أسماء قواعد البيانات السابق إتشاؤهاء وبعد كتابة اسم قاعدة البيانات المراد إنشاؤها وهي 
| "00161003" وبالضغط على زر "666386" يتم إنشاء قاعدة البيانات الجديدة. 


لاحظ | phpMyAdmin‏ 
© 01 © ها لله ® 
ظهور اسم قاعدة البيانات التي تم إنشاءها ضمن قواعد Recent | Favorites‏ 


New‏ خخ ل 


| البيانات السابقة كما بالشكل. ص 
dbdictionary |‏ 2 


information_schema‏ اناي 


)5( وبالضغط )ءاام على قاعدة البيانات mysql‏ ادنك 


"dictionary"‏ تظهر الشاشة التالية: (صف مكوناتها مع مناقشة زملائك ومعلمك) 


6 M dmin كن‎ structure |j SQL 4 Search Query l4 Export بت‎ Import ”كن‎ Operations ¥ More 
phpMyA ا‎ 


| 
۰ &Aۍl ها‎ © 016 No tables found in database 
/ 
| 


Recent Favorites 
شا‎ New Create 
2 cdcol 


1 dbdictionary Name: Number of columns: | 4 
9 employees 

2 informatig 

# i mysql 


| تأكد من اختيار تبويب r٥"‏ ں†c‏ ں5" وتحت "316+ مtھماC"‏ اكتب اسم جدول البيانات المراد 
إنشاؤه وليكن "۲٥۴۶"‏ ثم ادخل عدد حقول الجدول في "ئ۸ ںاہC‏ fہ "Number‏ وليكن (5)» 
وأخيرًا اضغط )عا على زر "60" لتظهر النافذة التالية: 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


tructure J 
Collation Attributes Null Index A_I Comments MIME type 
10 INT Wl fs None vl ا‎ lll Û PRIMARY v 2 
وعد‎ VARCHAR 1 5o None [vl | utf8_croatian_ci [¥] لا العا‎ | vl لا‎ 
em VARCHAR [Vl [so None [VJ | utf8_croatian_ci [V] ك‎ Û ] j O 
Fes VARCHAR Vl 220 None [IV] | utf8_croatian_ci [V] GO] = | lj Û 
pice VARCHAR [Yl [30 None زم[‎ | utfêmb4_croatian[v] لا إلضا‎ |] j O 


Table comments: Storage Engine: û) Collatiog 


InnoDB 5 


حتى تستطيع الكتابة باللغة العربية 
داخل الحقل حدد نظام التشفير 


Save 


من الشاشة السابقة: 


لاحظ : 

- جدول البيانات يتكون من حقول 1©105آ. 

- كل حقل لابد أن يكون له اسم وهو ما يجب ادخاله أسفل "۳۴ھ ونوع بيانات 934371/06 وهو ما 
يجب تحديده أسفل "058لا1". وحجم أو طول الحقل ١607941‏ وهو القيمة المطلوب إدخالها أسفل 
'00411/310165ه-": وحتى يمكن الكتابة باللغة العربية داخل الحقل فيجب اختيار نوع التشفير أسفل 
."Collation"‏ 

- في حقل 1D‏ يتم اختيار رهم من القائمة المنسدلة أسفل »×ملم| لجعله مفتاح أساسي 

.Primary key 


- اضغط زر "531076" لحفظ جدول البیانات تحت اسم "16©1175". 


زر "Save"‏ تظهر الشاشة التالية: 


ESE BESS 


SQL 4 Search ¥ Insert +4 Export كسم‎ Import a) Privileges 7 Operations - More 
Rows يق‎ Type Collation Size Overhead 
][ terms 7 Browse 4 structure هذا‎ Search عق‎ Insert 99 Empty © Drop O InnoDB latin1_swedish_ci 16 KiB ج‎ 
1 table Sum 0 InnoDB latin1_swedish_ci 16 KiB 0B 


Check All With selected إا‎ 


١ fê Data Dictionary 


eate table 


Name: Number of columns: 4 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 4 ۲۹ 


فيها اسم الجدول الذي تم حفظه 


. احتياجاتك. 


باسم ومم,ع7» وعدد الجداول في قاعدة 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


هئ 5 


البيانات 


)٦( |‏ استعرض بناء عمبلغعلمغ+5 جدول قاعدة البيانات "مغك طك" وذلك كما يلي: 


موضح بالشاشة التالية: 


أسماء وخصائص الحقول في جدول 


Terms 


ظ باختیار اسم جدول البیانات ۲۵٣٣۶"‏ ثم اضغط ۸ا٤‏ على زر "۲۵ Stu ctu‏ كما هو 


phpMyAdmin 


4@00 0 7 Structure [J] SQL 4 Search Fé Insert لا‎ Export لك‎ Import 2: Privileges #* Operations ® Tracking 36 Triggers 
ent Favorites # Name Type Collation Attributes Null Default Extra Action 
O1id 19 No None AUTO_INCREMENT &F Change © Drop £ Primary وق‎ Unique 15 Index EE Spatial 9[ Fulltext [E] Distinct values 
زع‎ 2 term varchar(50) utf8_croatian_ci No None Change © Drop £? Primary i Unique E] Index FF Spatial (| Fulltext |] Distinct values 
د‎ dbdictionaı 
ها‎ 0 0 [J] 3 trans varchar(50) utf8_croatian_ci No None „fF Change © Drop فلي‎ Primary [fj Unique E] Index [E Spatial [f] Fulltext [E] Distinct values 
م‎ 4 defe varchar(220) utf8_croatian_ci No None § Change © Drop ف‎ Primary [j Unique jE] Index f Spatial [7] Fulltext |] Distinct values 
ETT [J 5 picture varchar(30) utf8_croatian_ci No None „§ Change © Drop هلي‎ Primary [ij Unique E] Index FE Spatial [EF] Fulltext [E] Distinct values 
Lg mysql 2 [ICheckAll With selected: E] Browse # Change @ Drop @Primary [fj Unique E] Index 
| performance_schema 
0 رق‎ Print view 4E Relation view رالل‎ Propose table structure @ & Track table ول‎ Move columns 
school 
3 FiAdd 1 column(s) © AtEndof Table O At Beginning of Table O After 0 [VY] (Go 
| test 
+ Indexes 
| webauth د ا‎ 
Information لإضافة حقل‎ 
جديد‎ 
Space usage Row statistics 
Data 16 KiB Format Compact 
Index 08 Collation latin1_swedish_ci 
Total 16 KiB Next autoindex 1 


8 AM 


Dec 02, 2015 at 0 


Creation 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


ادرس الشاشة السابقة . ماذا تلاحظ ؟ ناقش معلمك وزملائك 


بدراسة الشاشة السابقة يتضح ما يلي 
http://localhost:8080/phpmy‏ جام | )9 
phpMyAdmin‏ 
ê © 01 ©‏ للها ® 


Recent Favorites 


ه اسم قاعدة البيانات ."dbdictionary"‏ 
ه اسم جدول البیانات "05مع1". 


ه يحتوي جدول البيانات "٥۴۶"‏ على (5) 
خسيه کا اهار عا خا 


ه تم تعيين حقل "10" كحقل مفتاح أساسي 
.Primary Key‏ 


Insert [+ Export 5} Import‏ غ326 

s Null Default Extra Action 

AUTO_INCREMENT ZF Change 
J Change 
#/ Change 
J Change 
طق‎ Change 


None 
None 
None 
None 


None 


#/ Change  @ Drop „4® Primary 


@ 35 Track table 


U Unique 


> Move columns 


At Beginning of Table After | id v ٤ 


Propose table structure 


4 Search 


varchar(50) utf8_croatian_ci 
varchar(50) utf8_croatian_ci 
varchar(220) utf8_croatian_ci 


utf8_croatian_ci 
With selected: [E] Browse 


efê Relation view 


column(s) @ At End of Table 


5 picture varchar(30) 


Check All 


1 id 

2 term 
3 trans 
4 defe 


2 


Print view‏ كل 


FeAdd |1 


+ Indexes 


Row statistics 


Compact 
latin1_swedish_ci 
1 

2615 at ©69 :58 AM 


Format 
Collation 


Next autoindex 


Dec e2, 


Creation 


Information 


Space usage 
16 KiB 
eB 
16 KiB 


. تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


الوحدة الثانية 
متطلبات ومراحل إنتاج المشروع 


ه تستطيع أن تضيف حقل جديد أيضًا وتحديد مكان إضافته في الجدول النشط. 


العنوان : "ادخال بيانات فى جدول ۲٥٣۶‏ باستخدام |/1/19/50". 


ادخل خمسة سجلات لمصطلحات كمبيوتر بالجدول 7611075 
باتباع الخطوات التالية: 
ه اختر جدول البيانات المراد إدخال بيانات فيه "erm"‏ ثم اضغط )ا٤‏ على تبويب 
"مہا" وادخل البيانات في كل حقل أسفل "عب|ج/ا". 


phpMyAdmin لوق‎ aE 1270.01 + e لددمناء مل‎ E u 


Operations ® Tracking 3% Triggers‏ “أن | Structure ll} SQL @ Search Fi Insert |.) Export  & Import =7 Privileges‏ ع3 Browse‏ © © واج 
Recent Favorites Column Type Function Null Value‏ 
ê New id int(5) v‏ 
cdcol 0‏ 2 
dbaictionary term varchar(50) 5‏ 4 = 
Î New `‏ 5 
j terms tr rarchar(50) 5‏ - + 
information_schem. `‏ , + 
mysql defe varchar(220) 2‏ ونه 
اا 1 
performance_schema‏ 
phpmyadmin picture varchar(30) 2‏ +2 
school -‏ ذا 
Go‏ اا 
webauth‏ #4 
Wl Ignore‏ 
Column Type Function Null Value 50‏ 
.١‏ اختر تبویب ٣٤‏ میہا۔ re¬‏ 
O ٠ 0‏ 
0 
". إدخال البيانات اسفل 2 tem varchar(s0)‏ 
ا GD‏ رسخا 
trans vare! har(50) 2 51‏ 
عبااج/ا لكل حقل. 
defe varchar(220) 38‏ 
٠.‏ 50 
۳. بعد إدخال البيانات e‏ 


اضغط 60. 


وبنفس الطريقة تستطيع إدخال بيانات في أي جدول من جداول قاعدة البيانات باستخدام تطبيق 
.MySQL‏ 


| تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ۰ 4 | 0 


4 


١ 


الوحدة الثالثة 


الوحدة الثالثة 


انشاء صفحات موقع 
"قاموس مصطلحات الكمبيوتر المصور" 


| في نهاية الوحدة يتوقع أن يكون الطالب قادرًا على أن: 

. يوظف بعض أدوات التعلم الإلكتروني في انتاج مشروعه. 

. يوظف تطبيقات تكنولوجيا المعلومات والاتصالات في بناء محتوى تعلمه. 

. يوظف أحد تطبيقات إنشاء مواقع الويب في الربط بين صفحات موقع ويب. 

. يوظف التطبيقات المناسبة في معالجة عناصر الوسائط المتعددة (صوت - فيديو- صورة 
. يتعرف لغة 1۲11 و ۴1۴ وتطبيقاتها فى تصميم مواقع الويب. 

. يمارس مهارات التعامل مع المعلومات الإلكترونية (تحديد - تقييم - انتقاء - تنظيم). 

. يوظف مصادر المعلومات الإلكترونية المرتبطة بمشروع محدد فى تنفيذ المشروع. 

. يتعرف يعض المعاملات الخاصة والمتعلقة بلغة 64۲ 


. يتعرف بعض المفاهيم والصيغ الخاصة بجملة ۴| وجملة Swi‏ 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


.(... 


2 


تكنولوجيا 


المعلومات والاتصالات - الصف الثاني الثانوي 


۳۳ 4 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


١ 


المطلوب : إنشاء صفحة وبيب باسم "16511" Terms‏ | 


- 


من خلال هذا النشاط يمكنك استخدام كود 111/1 فى إنشاء صفحة ويب باسم "16511" مواصفاتها: 


."My First Web Page" عنوان صفحة مستعرض الإنترنت‎ 

تظهر عبارة "الكمبيوتر التعليمي" في أول سطر من شاشة مستعرض الإنترنت. 
في السطر الثاني: صورة علم مصر في منتصف الشاشة. 

في السطر الثالث عبارة: "تحيا مصر" بحجم كبير في منتصف الشاشة أيضًا. 
في السطر الرابع عبارة: "الصفحة الثانية" في يمين شاشة المستعرض. 


ولتحقيق ذلك اتبع الخطوات التالية تحت إشراف معلمك 
خطوات تنفيذ النشاط 

.7/016030 حمل برنامج محرر النصوص‎ )١( 

(۲) اكتب الكود التالي: 


١ My صم زع‎ web Page 
>/ 111 حه‎ 


< وم[ . + ملاوع" = 
<۸1 /> تحيا مصر <11!> 


<م/> الصفحة التانية <'"+0 5م" = 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ۴۳ ۳٤‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


(9) احفظ الملف باسم وامتداد "18811.10" على سطع المكتب» واختر 
"1-8لا" من 570600179 وذلك لعرض النصوص العربية بشكل صحيح في شاشة المستعرض 
كما بالشكل التالى: 


© 7 î Ml Desktop ب‎ û Search Desktop م‎ 


Organize > New folder 5 


۸ ^ 
Favorites Libraries 
Wl Desktop System Folder 
RB Downloads 
£] Recent places User 
System Folder 
Libraries 
5 0 AM Computer 
ن‎ System Folder 


8 Documents 


کک 
Network‏ 
Pictures A. System Fo‏ | 


Access the computers and devices that are on your network. 


Apps 
Shortcut 
puter 1.76 KB 


v ÛÎ 13-8-2015 Translation 1st Sec 5 


(50.*) كارع ناعهه 


+ Hide Folders Encoding: Save Cancel 


)٤(‏ افتح الملف "۲٠5٤1.٤٣١"‏ من سطح المكتب للتعرف نتيجة تنفيذ الكود في شاشة مستعرض 
الإنترنت لتظهر كما يلي: 
. 


ÎD My First Web Page - Microsoft Internet [xplorer 


Eke C4 Yew Favrktes Ios Heb 
8 12 سوسم بأل سمه ل و‎ © 


€) CMDoamerts and 5 ات !لتب ححيدغا؟ نراهة هقخ له لابو‎ hem 


1 05 
الكسديودر التسيمى 


(5) ويمكن استعراض كود ا۳1۲ لإجراء أي تعديل» وذلك بالضغط 1161 1-60 على شاشة مستعرض 
الإنترنت واختر أمر "5010166 /لا#ؤلا” من القائمة المختصرة» كما يلى: 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي IF‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر ١‏ ِ 


13 lêy [lest Web Page - Micreseft laternet [xplorer 


Fie E ew Fnote Tots Heb 
ned عسممء جا‎ © 


€) © وجوت‎ ind نونفو و فم خرلوجص؟‎ his ek! em 


يد ا 


بجحو" دون 


E az 
فا‎ ۰ 


Art 
حو مم‎ 
Erport أن اجو مة ها‎ 


free Yo. be يي‎ 


perm 


€] هذا وبواجو0‎ sor OM.) for is جومم‎ 


(1) بعد حفظ التعديلات في كود ا1۲ أعد تنشيط شاشة مستعرض الإنترنت» ثم باضغط على مفتاح 
5 لتشاهد نتيجة التعديلات على صفحة الودب. 


! تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ۰ 2 84 | rt‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


.HTML 


المطلوب : انشئ صفحة ويب پا "Test?"‏ تارظن الآتي: 


."My Second Web 23606" عنوان صفحة مستعرض الإنترنت‎ ٠ 

© عبارة "ادخلوا مصر إن شاء الله آمنين' ' في أول سطر من شاشة مستعرض الإنترنت. 

٠‏ في السطر الثاني: ضع صورة علم مصر وبجوارها عبارة "الصفحة الأولى" في يمين شاشة 
المستعرض بالأبعاد التالية ."5١٠ × ٠١٠١"‏ 


خطوات التنفيذ 
استرشد عزيزي الطالب بالمهارات التي اكتسبتها في النشاط السابق لإنشاء صفحة 
الويب الثانية باتباع الخطوات التالية: 
)1( افتح برنامج محرر النصوص الذي سوف تستخدمه في كتابة كود HTML‏ وهو ea‏ 
(۲) ناقش مكونات الكود التالي مع زملائك: 


® Test2.htm - Notepad 


My second web Page 
</TItle> 
</ Head> 


<Body> 
إدخلوا مصر إن شاء الله آمنين‎ 
<p align = _ RIight"> 
<img src = Egypt - Jpg" 
heîiîght=50 حباعق دين‎ 10 
الصفحة الأولى‎ </P> 
</ BOQdYyY> 


</HTML> 


)"( اكتب الكود. 
ل( احفظ الملف باسم وامتداد "۲652.١١1"‏ على سطح المكتب. 
١ه(‏ اختر "11-8 لا" من 207600159 أسفل شاشة حفظ الملف. 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي “ 4 ۳۷ 


الوحدة الثالثة 


)( افتح الملف على سطح المكتب وقيم نتيجة تنفيذ الكود في شاشة مستعرض الإنترنت: 
My Second Web Page - Mozilla Firefox‏ )’ 
Fle Edt View History Bookmarks Hols Help‏ 


| Second Web Page 5 


2 | ١ fileifffC:Documents and Settings/ahmed (Desktop û 2a, is Test2. ht 


تدريب :اكمل الجدول التالي: 
قم بكتابة الغرض من الكود الذي تم كتابته: 


الغرض من الكود الكود 


<TilleS O | O OOOO 
My Second Web Paãğê) accused ل 1م قم عع لاقع 6 ل ع6 م مطل بم عأ للج‎ ee 

Roi‏ اا لصت اللةه- 

أين يظهر هذا النص؟ 26> ب 944 2866/2000 


ادخلوا مصر إن شاء الله آمنين 

شرح الكود : <p align = 'Center'>‏ 
-بداية التاج <۴>: فقرة جديدة 

-خاصية "061161" = ”واا : تعني محاذاة النص التالي لها توسيط على شاشة 


المستعرض 
)١(‏ اشرح الكود: ...< انع" > <imo STC‏ 
height = 50 width = 100<‏ 
)۲( اكمل: ما هو تنسيق محاذاة الصورة؟ E‏ 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


"IF 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


ڪڪ ات كك پا بترت 5 


العنوان "الربط بين ست الويب يب بكود لغة الترميز "HTML‏ 
المطلوب : غتل ما يلزم في صفحتي الویب "Test2.html'y "651 htm‏ اتس في كود 111/1 


يت ڪھ ت چ کک کے رتك ابت وك 17 کت کت > حاو صو اح ويك رتت ا 


٠‏ يتم الانتقال إلى الصفحة '1©512.176171" عند الضغط على النص "الصفحة الثانية" في شاشة 
مستعرض الصفحة '5112[1. 16511". 
٠‏ امكانية العودة إلى الصفحة الأو لى 16511.11" إذا تم الضغط على صورة 'علم مصر" 


أسفل شاشة المستعرض للصفحة '4101ط. 16512". 
اجراءات النشاط: 
)١(‏ عدل الكود في '![5410. 16511" كما يلي: 


My First web Page 
</T1it1e> 


الكمبيوتر التعليمي 


<p align = "center"> 
<img src = "Egypt.jpg'"> 
>]41< <41ا/ر> تحيا مصر‎ 

</p> 

<p ا‎ = "right"> 


<a hre 


<ج/> الصفحة الثانية "test2.h†™1"<‏ = 
!<م /< 


لاحظ ماذا حدث. 
- تم وضع النص المراد جعله ارتباط تشعبي بين بداية ونهاية الكود التالي: 
<3/> الصفحة الثانية <a href = "test2.hml'>‏ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


First Web مويه"‎ Microsoft Ilmertnel [xplorer 


prens &@‏ سمه 


ر ا 


) CADoanmernta ard Settingalatmead\Oeditog) سيد ¥4 ت‎ Aree! her 


(۲) عدل الكود في "۲٠5٤2.٤۳١"‏ كما يلي: 


ا[ ت 


My Second web Page 
</T1tIe> 
</ Head> 


<Body> 
إدخلوا مصر إن شاء الله آمنين‎ 
<p لا‎ = "Right"> 
<a href = "Test1.html'"'> 
>30 src = "Egypt. 3 "وم‎ 
ue1ght=5O wi d>h—1002 </a> 
حدم ر> الصفحة الأولى‎ 
</ BOdyY> 
</HTML> 


ماذا تلاحظ؟ 
- تم وضع كود إدراج الصورة المراد جعلها ارتباط تشعبي بين بداية ونهاية التاج"539" التالي: 
<a href = 'Test1.htm'>‏ 
<img src = '"Egypt.jpg' Height=50 Width=100>‏ 


< /3< 


3 My Second Web Page - Microsoft Internet Explorer 


LEK 
File Edit سيعلا‎ Favorites Tools Help ê 


e 3‏ © ا اسا - !© :6 42 Favorites‏ حاب search‏ كي 60 2 ا وت ` sax‏ © 


Address 2١ C:\Documents and لممعكادعط الع ممق أكومعغع5‎ û جديدة؟؟‎ 3 Test2.htm امه‎ 5 Go @ 


MM 
r الصفحة ا‎ 


My Computer‏ و 


إدخلوا مصر إن شاء الله أمنين 


3 file }C:Y Documents 20and%205ettings/ahmed/Desktop|إ‎ û1 + %07 کنب 5/5 + ججديدة]‎ 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


(۳) احفظ التعديلات في الملفين '14121. 165161" و'16512..14001". 

(4) افتح الملف '۲٠511.۸٤۳١'‏ من سطح المكتب ولاحظ نتيجة تنفيذ الكود في شاشة مستعرض 
الإنترنت. 

(5) اضغط على الإرتباط التشعبي 'الصفحة الثانية". ماذا يحدث؟ سجل ملاحظاتك. 


)٦(‏ بمجرد الضغط على الارتباط التشعبي تنتقل إلى صفحة '7595142.574171” وتظهر في شاشة 
المستعرض. 

(۷) من صفحة الوبب الثانية "٠٠5٤2.٤١١"‏ حاول العودة إلى الصفحة الأولى '654001. 165141" 
بالضغط على الإرتباط التشعبي 'صورة علم مصر'. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر ١‏ ِ 


المطلوب: عدل ما يلزم في صفحتي الوبب "۲٥5٤1.٤٣۱"‏ و ''st2.٤۳١'‏ من خلال تطبیق 
Expression Web ۰‏ أو التعديل في كود ا۳۲ بحيث: 


مستعرض الصفحة '۱٣٤ہ.est1٦"'.‏ 
٠‏ ويمكن العودة إلى الصفحة الأولى "٣٠51.٤٣١١"‏ إذا تم الضغط على صورة "علم مصر" 
أسفل شاشة المستعرض للصفحة '84101. 16512". 
تحت إشراف معلمك اتبع الخطوات التالية: 
)1( حمل برنامج .Expression Web‏ 
(۲) افتح صفحتي الوبب '![54120. 16511" و '18542.176131" من خلال قائمة ملف ١۴ء‏ ثم 
اختر منها أمر فتح 6۸ص0 واختر اسم الملف "۲۵5٤1.٤٣۱"‏ وكرر ما سبق للملف 
الثاني "11121 16512". 


© - ^ jl » ANSARY1 (F:) ١ ث2‎ ٠ 


Organize > New folder 
Type 4 
Libraries : 5/17/2004 1:29 AM Shortc 
| © Documents 5/17/ :42 AM Shortc 
الى‎ Music 5/17/ 2AM HTML 
E] Pictures Eî 5 OAM HTML 
8 Videos :2 / Text 0 
/ Text 0 
0-1 Homegroup 3 7/ 2AN HTML 
¥ xampp-win32-5.6.3-0-VC11-installer 2/19 0PM Applic 
E الصف الثانى الثانوى الفصل الدراسي الاول كا عسيست‎ --... / Micros 
كك‎ 05 )C( الصف الثانى الثانوى الفصل الدراسي الاول ا‎ 3/29 Micros 
مت‎ RECOVERY (E) 75 الصف الثانى الثانوى الفصل الدراسي الاول‎ 0 5 
ىت‎ ANSARY1 كتاب 2 ث 8 (ع)‎ 5/17/20 


€ د 


File name: Test1 v All Files 


Tools > 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ١‏ 6 2 


الوحدة الثالثة 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر ١‏ - 


(9) تلاحظ ظهور اسم صفحتي الوب في شاشة البرنامج كما يلي: 


: File Edit View Insert Format Tools Table Site DataView Task Panes Window Help Type a question for help 
DE هاه 2 ذه يه‎ ZH لها :ل © 5 يو ما د‎ ® A0 5 ©» >+ » شا ا‎ 


۴ هضاء u»‏ ساء يط نس j3 EE‏ م عم ك5 ع ع اوس مسال Paragraph > (Default Font) (Default Size)‏ فم : 


ESE اك 1 جد دادج‎ ”| J show Layout Tool jA jA j 


Folder List سا‎ j O x a] Web Site || Test1.htm* NTest2.htm* x || Toolbox O x 
Ji C:UserslansaryNew Pocuments ^ | lı] [<body>] 2] [|| سدم‎ ^ 
Î Butterfly Fish.jpg A || Tags 
|Z button1C.jpg الكمبيوتر التعليمى‎ 5| <div> 


Î button1D.jpg [E] <span> 


Î button1E.jpg Î Break 
CV.dwt 
A رح‎ Horizontal Line 
{û} default.htm ll ım 
2] Image 
s] hopes.htm ا‎ 
İs] personal_data.htm r كاك‎ Inline Frame 
Îs] qualification.htm 
ا‎ 


Tag Properties O x 


. 
E 
<p> 


Ağ attach style sheet... 


Select CSS style to apply:‏ تحيا مصر 


| f acces... Clear Styles 


fF conte... اة ية‎ | 


|) تك‎ 2 
اب‎ BEER] عدم 8 :1م55‎ 5 
Visual Aids: On__Style Application: Auto 4.22 KB Quirks 591x377 IE6 0551 


< 


ادرس الشاشة السابقة › ولاحظ ما يلي: 


(( يظهر أسماء صفحتي الوبب "Test1.hm|"‏ و ."Test2.html"‏ 


Web Site || Test1.htm* Testa himê ١ x‏ لق 


(ب) الصفحة التي قمنا بإنشائها من خلال كود لغة الترميز ا1۳۷ تظهر كما لو كانت في شاشة 


المستعرض وهو ما سبق وأشرنا إليه في خاصية (6 /لالاا5لالا)» ويمكن إجراء أي تنسيق أو تأثير 
أو إضافة أي نوع من أنواع المعلومات في الصفحة من خلال الكتابة والإدراج بسهولة كما لوكنت 


; File Edit View Insert Format Tools Table Site Data View Task Panes Window Help 1 
: 3 - 3 - نه - درن هو 5د عن | 2 - ها ه 2د ذه ف‎ - ١ 8 له أ‎ | © Ad © | ؟‎ - | © 1 u + » ها‎ 9 
; Aj Paragraph > (Default Font) + (Default Size) - 8 م‎ UE 3 EF a | j5 2 ع2‎ 8 


EE TE EEE EEE ERE EDN ” |Z show Layout Tool [A jA j 


6 


(ت) حاول الضغط على الأزرار الثلاثة التالية:_- ©600- Design - Split‏ 


| مودعم فق‎ E split E Code 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي . 4 ٤۳‏ 


الوحدة الثالثة 
"قامو س مصطلحات الكمبيوتر المصور" 


إنشاء صفحات موقع 


ناقش زملائك ومعلمك 


0 | يعرض صفحة الويب كما تظهر في شاشة مستعرض الإنترنت» 
و كل جزء في صفحة الويب في شاشة "واه يتم تحديده ب أنهاع5 
يظهر كود ا١1۲‏ الخاص به في شاشة الكود. 

مله | يعرض كود لغة الترميز 1111/1 لجميع مكونات صفحة الويب التي تم عرضها. 
ام8 | يقسم الشاشة إلى جزأين الأول تظهر فيه صفحة الويب والجزء الأخير يظهر فيه 
كود 1۲M‏ الخاص بها. 

)٤(‏ نشط صفحة الويب الأولى "٠٠511.۸۳"‏ ثم اضغط زر 14ام5 لتظهر صفحة الوب وكود 

41101 الخاص بها. 


)°( لعمل ارتباط تشعبي للعبارة "الصفحة الثانية", يلزم: 


٠‏ تحديدها 5616٥۲‏ ثم اختر من قائمة إدراج "105614" أمر ١٣"‏ أا#مل" لتظهر النافذة التالية: 


Text to display: الصفحة الثانية‎ ScreenTip... 


Look in: للا‎ C:\UserslansaryNew\Documents\My Web Sites| ¥ 51 © =1 


File or 
2 [ F:\2 i\Test1.htm (open) م‎ 
E 23 RE TEAITED) 
3 اكز‎ Butterfly Fish.jpg 


lë button1C.jpg 
Browsed || button1D.jpg 
lë button1E.jpo 


CV.dwt 


Test2.htm 


."016" اختر اسم الصفحة '!1©512.11617" ثم اضغط زر‎ ٠ 
بذلك تصبح العبارة 'الصفحة الثانية" إرتباط تشعبى حيث تظهر بلون مميزء وتحتها خط وعند‎ 6 
تحديد الإرتباط التشعبي في نافذة 17851901 يتم تظليل كود ا1۲1 في نافذة ©00) كما يلي:‎ 


. تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ‏ 


4 2 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر ١‏ 


3 على‎ f View Inset Fgmat Tools Table عع‎ DataView Task Panes Window Help 

ف -On »+ + D‏ 30 9ت 5ت ١.‏ “5-6 وهادة عم 35-7 442 9 -0-2: 

ed 8‏ +» ود 0-052٠.‏ 2 2 2 12 ام نم * ع Paragraph ٠ (Defaukt Font) + (Defauk Size) . B1U‏ م ؛ 
EFEEET 1 LESTE‏ 


الكمتبولر اللعليفيل 

<p align = "Ceater"> 

<ing src = ‘Egypt. jpg" "عا 10ها‎ 256" heigh=°107°> 
>14 21833»"9+161"< تحبا مصر‎ >/81< 

1 <p align * “right © 01 

1¢ </Body> 


1 Visual Aids On Auto 435K8 591x225 IE 1 


s2."‏ مع التأكد من الضغط على زر 16ام5. 


اضغط كان1!© على صورة علم مصر تتحديدهاء ثم اختر من قائمة إدراج "1556/4" أمر 
ink"‏ ملا" لتظهر النافذة التالية: 


Test1.hini 


.'0)' ثم اضغط زر‎ "''s٤1.٤٣١' اختر اسم الصفحة‎ ٠ 


تكنولوجيا المعلومات والاتصالات - الصف الثاني الثانوي ورم 4 4٥‏ 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


(؟) بذلك تصبح صورة علم مصر إرتباط تشعبي حيث يتغير مؤ شر الفأرة عند التأشير عليهاء وعند تحديد 
الإرتباط التشعبي أي صورة العلم في نافذة 1085191 يتم تظليل كود ا1۲۷ في نافذة 000©6) كما يلي: 
x‏ ایا 
File Edit View Insert Format Tools Table Site DataView Task Panes Window Help Type a question for help‏ ; 
ع لها ها » + »؟ -©-BAMHA@ Ad OTO‏ كا 4ق كن دن VN‏ - ذا ف الشة 4 ل  -‏ - ل : 
6 ها » + » وراء يي طظة. نم ا كه كه 2 دز | مم عم اك Paragraph + (Default Font) > (Default Size)‏ و 


E/E + lÎ | BÈ‏ انز | *3 ا 


Folder List a نلا‎ O x Toolbox Elax 


HH 
لقنا‎ Web Site || Testi.htm* N Test2.htm* x 
7 C:\UserslansaryNew\Pocuments A 6 [chody>| | |<م>‎ <a>] حاعااة.وهه‎ E] HTML مم‎ 


Ê Butterfly Fish.jpg EE E] Tags 

e 1 3 </style رر ات‎ 

Î button1C.jpg </Head> 5| >< 

| button1D.jpg 15 LE] <span> 

Z| button 1E.jpg 16 <Body> Break 
CV.dwt 17 <div class="style2"> a 

65 default.htm 18 اح إدخلوا مصر إن شاء لله آمتين<81019>‎ Horizontal Line 

19 </strong></div> laãl Image 
لا‎ .him 0 <p align = "Right"> ê Inline Frame 
l_data.htm 2 3 

ls] personal_ <a href="Test1.htm"> 

lg quaiîation.him اب‎ 2 <img src = "Egypt. jpg" Height=50 Width=100 class="style1"></a> fflayer 

ET PED E 23 الصقحة الأولى‎ >/2< Paragraph 


</Body> 
Apply Styles O, x 


Apply styles “Manage Styles‏ إدخلوا مصر إن شاء الله آمنين 
New Style... Options >‏ 54 


<img.style1> Ağ Attach style sheet... 


El attributes ^۸ 


Fi class style1 Select CSS style to apply: 
انوج‎ height 50 E 
Ê src _ Egypt.jpg ar Styles 
f width 100 FÎ Current Page 
al (@).style 
n _ v | | [BDesign Split E code 


Testl.htm Visual Aids: On__Style Application: Auto 4.41 KB_ Quirks 591x186 IE 1 


)٠١(‏ لتجرية الإرتباط التشعبي والانتقال إلى الصفحة ”۲٠5٤2.۸٤۳١'‏ اضغط ءا على الإرتباط 
الد : "| ذحنة الثانية" مع | تمرار اض خط على مفتاح Ctrl‏ بلوحة المفاتيح» فتنتقل إلى الصفحة 
الثانية "Test2.html"‏ وتصبح نشطة. 


)١١(‏ وأيضًا يمكن العودة إلى الصفحة "۲٠5٤1.٤١١"‏ اضغط »ا٥‏ على الإرتباط التشعبي صورة علم 
مصر مع استمرار الضغط على مفتاح ©٤٣١١‏ بلوحة المفاتيح» فتنتقل إلى الصفحة الأولى 
"16511.11" وتصبح نشطة. 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر ١‏ 3 


نشاط (ه) 


ا 3 عار بيت 
ا 8 


العنوان: "إنشاء موقع المشروع باستخدام تطبيق We‏ 050أودع:معرع" 
المطلوب: إنشئ موقع جديد من خلال تطبيق Web‏ 50أودع/م)اع 


يي تع کو ج کے حك جحت کے کک حك ل حت ج بتكي کے و حل شت ن چ ر کد کے ولحت و کے کے کے کے لت م يدن كت ہے بحت ربكت کک 


Data View كداعموم‎ Window Help 


نفذ الخطوات التالية تحت إشراف معلمك: 


Open Site... Ctrl+Shift+ O : 5‏ حم 
« افتح برنامج Expression web‏ 3 عم مم 
Close‏ 

٠‏ اضغط قائمة 5166 كما بالشكل التالى: 
Publishing 5‏ 
Publishing Settings...‏ 
Publish Current File... Ctrl+ Shift+ U‏ »> 
Publish Changed Files... Ctrl+Shift+ H‏ 
Publish All Files... Ctrl+ Shift+ A‏ $ 
Delete...‏ 
Export to Web Package... . 5 1 5-5-8‏ 
©« اختر أمر موقع جديد ع516 NeW‏ : جم 
« تأكد من ظهور النافذة التالية على شاشة جهازك. ارد جح 


New 
Site 
E لل‎ one Page site Description 
Empty Site Create a new site with nothing in it. 
Templates ÛÎ Import site wizard 
ا‎ 
Options 
Add to current site 
8 Use Enarypted Connection (SSL) 
Specify the name and location of the new site 
Location: C:\xampp\htdocs\dictionar yÎ ينا‎ Browse... 
[Fl Add to Managed List Name: [dictionary 
| OK ) Cancel 


ادرس الشاشة وناقش معلمك وزملائك. 
ه من نافذة موقع جديد ع516 /لاعل! اختر موقع خالي Empty Site‏ 
« فى مربع 106361010 اكتب اسم الموقع dictionary‏ في llئlunرC:\xampp\htdocs‏ 
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Create a new site with nothing in it. 


Options 
Add to current site 


Use Encrypted Connection (SSL) 


<| | Browse... 


ست ]ر e‏ 


| Description 


[VlAdd :و« ودود لعز‎ Name: (dictionary 


New 
Site 
5 || [E onePage site 
Î Empty site 
Templates 3 Import Site Wizard 
Speaify ا‎ and location of the new site 
Location: C:\xampp\htdocs\dictionaryl 


ه احفظ الموقع مع التأكدمن تحديد اسمه ومكان حفظه. 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات ١‏ 


بكتابة اسم الموقع 0161021 يتم عمل 
مجلد في المسار 


C:\xampp\htdocs 


٠‏ جرب تتبع المسار وتأكد من حفظ الموقع داخل المجلد 5ع56800. 


Windows Explorer يظهر مجلد الموقع كما بالشكل التالي فى نافذة مستعرض الوبندوز‎ ٠ 


Type 


File folder 
File folder 
File folder 
File folder 
File folder 
File folder 


DSee Free GIF I... 
HTML Document 


اس 
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htdocs ح١‎ ||| 5 


Burn New folder 


2 


Date modified 


Name 


dashboard‏ نه 
IB Dictionary‏ 
ıJ forbidden‏ 
JÛ img‏ 

ıJ restricted 
JÎ ممصم‎ 
Uz 

| apache_pb.gif 

ê apache_pb.png 
Cz apache_pb2.gif 

ê apache_pb2.png 
apache_pb2_ani.gif 
€] applications.html 


1 
Aj bitnami.css 7١17/٠1/75 ص‎ ۰¥ CSS Document 
5 favicon.ico Ye\T/°T/T- p-1: Icon 
€] index.html Ye1T/-T/T* p+: HTML Document 
Im index.php Y-1/-T/F* ۾‎ +: JetBrains PhpStorm 


HM 


Share with * 


كا (:0) Local Disk‏ وت 


Help 


Edit View Tools 


File 
Organize > Include in library ¥ 
jW Computer 
Ê, Abdallah_Mansour (C:) 

J savc 

di 75390073a585fdc4e4d822f9f882 

AdwCleaner‏ ف 

di ad9978869e590607f1 b64 

جا Downloads‏ ف 

ıJ MsOCache 

PerflLogs‏ فى 

Program Files‏ لها 

"5 ProgramData 

SWsetup‏ ل 

JÎ swrooıs 

77 Users 


Windows‏ فى 
J xampp‏ 


للا 


€ Network 


3 17 items 


لكمبيوتر المصور" 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


المطلوب:ا: تحت اشراف معلمك › انشئ صفحة Header.PHP‏ ْ 
ظ باستخدام برنامج Expression Web‏ ْ 


مواصفات الصفحة تحتوي على: ااا 
«صورة مناسبة تظهر في بداية صفحات الموقع. 
«النصوص الأساسية التي سيتم ربطها بصفحات الموقع لمساعدة المتعامل مع الموقع من 


التجول فيه. 
خطوات التنفيذ 
)١(‏ حمل برنامج .Expression Web‏ 
(۲) اختر أسلوب العرض 16ذام5. 
(9) ادرج صورة 83191061 ويمكنك استخدام خبرتك السابقة فى التعامل مع أحد تطبيقات تحرير 


الصور لتعديل الصورة حسب المطلوب. 
)٤(‏ اكتب النصوص التالية أسفل الصورة: 


الرئيسة - إدخال مصطلح - بحث عن مصطلح - تعديل/حذف مصطلح - مساعدة. 


هر 


الرئيسية إضافةمصطلح البحت عن مصطلح حذفمصطاح تعديل مصطلح 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


العنوان: "ندا الإرتباطات التشعبية لصفحات الموقع" 


ا 


المطلوب: : ۱ تحت اشراف معلمك استخدم برنامج ا٥۷‏ 20165510 في إنشاء الإرتباطات بين 
ا أسفل صورة 8311061 وصفحات الموقع الخاصة بكل منها. 


1 
1 
| 
1 
ا 
1 


- 


خطوات تنفيذ النشاط: 
أولاً- افتح صفحة "6306.01" من خلال برنامج Expression Web‏ بلغة وادرس 
الكود التالي مع زملائك ومعلمك. 


<html dir="rtl"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type'">™ 
</head> 
<body> 
<div> 
<img height='161' src='images/banner.jpg' width='1267' > 
<div> 


<div style="width: 1256px;text-align:right" > &nbsp; 

<a href="index.php">يسيئرلl</a>‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="add term.phٍp">&1غbspص;glطڊصم إضافة‎ 
<laz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="search term.php">glطصم <ج/>البحث عن‎ 
&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a htef="De] Term.php"> glطصم <تج/>حذف‎ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="Edit Term.php'"> glطصم تعديل‎ 
<laz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="Help.php'">دعlسa‎ </a> 

</div> 


</body> 
5 <html> 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


3 7 * 


ثانياً: الكود السابق يتم عمله في نمط التصميم 1١285101‏ وعمل إرتباط تشعبي ي كما يلي: 


٠ 2١ افتح صفحة 16206.01 من خلال التطبيق المستخدم حدد النص المطلوب تنفيذ ارتباط تشعبي‎ -١ 
| امم ل۸٣" كما بالشكل‎ ٣۸ له وهو "الرئيسة"» من القائمة 'إرتباط تشعبي‎ 


<span> 


Break‏ لد 


ES Horizontal Line 
کا‎ 11136 

25 Inline Frame 
| Layer 

٩آ‎ Paragraph 


3 EET ا‎ ِ > Form Controls 


Quick Tag Editor... 
فود‎ Manage Editable Regions... 
ا‎ Page Properties... 


| 
| f Font... 


۲- حدد صفحة الرابط وهى 17061.11 كما بالشكل | 
Hyperlink‏ عم 
Texttodpy:] aay 506079 |‏ 


Look in: 5 Dictionary | با لع‎ 
# | desktop.in ini 
للج‎ edit_term.php Target Frame... | 


| ım header_links.php 
E Parameters... | 


‘Ê post.php 
lm reg.php 

| mê search_term.php 

| rê signin.php 5 


Address: jndex.pp ZÎ] 
x e | 


Place in This 
Document 


| Create New 
| 000117211 
| 


E-mail Address‏ ا 


-٣‏ قم بعمل كافة الروابط وفقا لما هو مخطط للموقع 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


العنوان: "إنشاء صفحة الاتصال بقواعد البيانات "connection.php‏ 


المطلوب:ا: :3 تحت اشراف معلمك انشئ صفحة ويب جديدة بموقع /[01614101131 تحتوي على كود 


:. <?php 
Şusername="root"; 
$password=""; 
$database="dbdictionary"; 
$server="localhost"; 


$connect=mysql connect("$server", "$username", "$password"’); 
if ($Sconnect) 


1 
:("' هناك مشكلة فى قاعدة البيانات")عذل $select=mysql_select_db("$database") or‏ 


else 


ا 
:("لم يتم الاتصال بقاعدة البيانات")0طءم 


1 


فى الكود المكتوب 
والسابق شرحه فى كتاب الطالب. 


احفظ الصفحة باسم connection.php‏ 
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العنوان 


المطلوب: تحت اشراف معلمك. استعن بالشاشة التالية فی إدخال كود 8458 فى الأماكن المشار 


xoqıoo1 


sas Alddv 


26euew‏ كبرد 


CSS 2.1 1197x257 


| ص11:43 
ص TaD‏ 
و LD‏ . 


الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


: "إنشاء صفحة إدخال مصطلح مطمAdd_term.p"‏ 


ييا حا »+ ءءء سا ا ءءء .اس ا ا ل ل > ست > سس سس ا ل ا > سس ا سا ل ست سس ا سا ل سس سس سس سس سس سا سا سس سس سس س0 


1 


إليهاء وذلك لإنشاء صفحة ويب تستخدم في إدخال مصطلح إلى جدول قاعدة البيانات. ٠‏ 


File Edit View Insert Format Tools Table Site Data View Panels Window Help 
؟ - 2 5 م‎ 5 8 8 - 


Site View header.php  connection.php input term_terms.php* x input_term.php 


3s مامه‎ 


gfi<html dir="rt]"> 


١‏ إدخال كود صفحة <ه1t1ا/>ادخال‏ مصطلح للقاموس<8/>61816 
[</head> 1‏ 
EJ <body dir="rt1"> Header‏ 


saıyadoıd 6e1 


<div style="text-align:center" > <21<>/017/>إدخال مصطلح<21>‎ 
<form method="post" action="input term terms.php" enctype="multipart/form-data"> 
<div class="style2"> 
ebhE حدم‎ 
المصطلح‎ 
&anbsp; &nbsp; «nbsp? 
<input, .name="txt term" type="text" 
DFE عدي‎ 


[« ا 


نرج 

&nbsp; &anbsp; &nbsp; «nbsp; «nbsp; &nbsp; 

<input, .namez"trans" typez"text" style="width: 

SDE J> 

تعريق 

&anbsp; «nbsp; anbsp; &nbsp; anbsp; مةططغ‎ 

<textarea name="TextAreal" style="width: 480px; height: 34 

۲- إضاقة كود ۳4۲م الخاص >/ <hr.‏ 
NT 500‏ االصورة 
بالربط بقاعدة البيانات وإضافة :م ةطمع anbsp;‏ 
488px" type="file™‏ : لع 710"-<ع5211 <input name="Filel"‏ 

BF Is. BF FS OFT عكر‎ 

<input name="submitl1” style="width: 6PX" 


</form> 


Design Split Code 


Line 8, Column 1 | 6- B~ Is 1 


7 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


اجراءات النشاط: 
(١)اكتب‏ كود 2812 لإضافة صفحة .Heَader‏ 


<?php 


include("header.php'""); 
9> 


(۲) إضافة كود 119 المختصر التالي: 


<?php 

include('header.php'); 

include('connection.php'); 

if(isset($_POST['Submit1'])) 

{ 
$term=$_POST['txt_term']; 
$trans=$_POST['trans']; 
$defe=$_POST['TextArea1']; 
@$file=$_FILES['File1']['name']; 
$picture="pic/" . $file . " '; 
mysql_query("'SET NAMES 'utf8"); 
$query=mysql_query('insert into terms values(",'$term','$trans','$defe','$picture')'); 


} 


2< 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


أو استخدام الكود التالى 
إضافة كود ۴۳۴ الخاص بتحقيق الاتصال بقاعدة البيانات واضافة بيانات مصطلح جديد 


والذي من خلاله يمكن تلافي أوجه القصور في الكود المختصر: 
<?php‏ 


include("connection.php"); 
ifisset(S_POST['Submit1'])) 


if(is_dir( pic) { mkdir(pic); } 
@Sfile=$_FILES[File1']['name'] ; 
@Stmp=$_FILES[File1']['tmp_name']; 
if!empty($file)) { move_uploaded file($tmp,'pic/'.$file); } 
S$term=$ POST['txt term']; 
Strans=$ POST['trans']; 
$defe=$_POST['TextAreal']; 
$picture="pic/" . $file." "; 
if ( Sterm !== "" && $trans !== "" && $defe !== "" && !empty(Sfile) ) 
( 
mysql_query("SET NAMES 'utf§'"); 
Squery=mysql_query(""insert into terms values("",'$term','Strans','$defe','$picture')"); 
if($query) 
o :"ثم اضافة البيانات‎ 
echo("<label id='Label1' style='color: #FF0000;font-size: x-large;'> $datares </label> ب("‎ 
} 
else 


:"لم يتم اضافة البيانات"-و6:ة]903 
echo("<label id= Label1' style='color: #FF0000;font-size: x-large;'> $datares </label> ");‏ 
1 


} 
else 


;" البياناث التى ثم إدخالها غير صحيحة يجب إدخال جميع الحقول"-90313:65 
echo("<label id='Label1' style='color: #FF0000;font-size: x-large; $datares </labe ");‏ 


Localhost/dictionary/Add_Term.php 
قم بإدخال مصطلح جديد ثم اضغط على 'إضافة".‎ )٤( 
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الوحدة الثالثة 
إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


وإلى لقاء 
ف 
الفصل الدراسي الثاني 
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